<template>
  <div class="all">
    <heads></heads>
    <div class="conent">
      <div class="want">
        <img src="../assets/961732e5f8a041f0fe94e5671685cbac.jpeg" alt="">
      </div>
      <div class="input">
        <el-input type="textarea" class="input-box" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
        <el-button type="primary" class="sure" @click="huoqu" :disabled='dis'>确定</el-button>
      </div>
      <div class="message">
        全部留言<span>{{ this.textDate.length }}</span>
      </div>
      <div class="Avatar" v-for="(item,index) in textDate" :key="index">
        <img src="../assets/ae29acd700da7cce74d7ffcb3511295b.jpeg" alt="">
        <span class="name">胡歌</span>
        <span class="time">{{ Datatime }}</span>
        <p class="text">{{ textDate[index] }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import heads from './heads.vue'
export default {
  components: { heads },
  data () {
    return {
      activeIndex: '1',
      textarea: '',
      dis: true,
      dateValue: '',
      textDate: [
        '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！',
        '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！',
        '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！',
        '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！',
        '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！',
        '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！',
        '敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久 不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！'
      ]
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    quit () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    huoqu () {
      this.textDate.unshift(this.textarea)
      if (this.textDate.length++) {
        this.textarea = ''
      }
      console.log(this.textarea)
    }
  },
  computed: {
    Datatime () {
      var atime = new Date()
      return atime.getFullYear() + '-' + (atime.getMonth() + 1) + '-' + atime.getDate()
    }
  },
  watch: {
    textarea () {
      if (this.textarea === '') {
        this.dis = true
      } else {
        this.dis = false
      }
    }
  }
}
</script>

<style>
.all{
  width: 100%;
  height: 100%;
}
.want{
  position: relative;
  margin-left: 23%;
  /* top: 120px; */
  padding: 120px 0 50px 0;
}
.want img{
  width: 600px;
  height: 399.5px;
}
.input{
  width: 1000px;
  margin-left: 20%;
}
.input-box{
  min-width: 1000px;
}
.sure{
  position: relative;
  /* margin-left: 300px; */
  left: 95%;
  top: 23px;
}
.message{
  margin-left: 440px;
  margin-top: 60px;
}
.message span{
  font-size: 14px;
  color: #f37d25;
  position: relative;
  left: 20px;
}
.Avatar{
  margin-left: 440px;
  margin-top: 40px;
  width: 1000px;
}
.Avatar .name{
  font-size: 14px;
  position: relative;
  bottom: 35px;
  left: 18px;
}
.Avatar .text{
  font-size: 14px;
}
.Avatar p{
  width: 930px;
  position: relative;
  left: 70px;
  bottom: 20px;
}
.Avatar .time{
  font-size: 14px;
  position: relative;
  left: 845px;
  bottom: 35px;
}
.Avatar img{
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
</style>
